<template>
  <div class="home_wrap animate__animated animate__fadeInLeft">
    <!-- 工作台 -->
    <el-card class="workbench_card_wrap">
      <template #header>
        <div class="workbench_header_box">
          <div class="left_box">
            <span>工作台</span>
          </div>
          <div class="right_box">
            <span class="week">{{ getCurrentWeek() }}</span>
            <span class="time">{{ currentShowTime }}</span>
          </div>
        </div>
      </template>
      <div class="workbench_card_main_box">
        <span>{{ `欢迎您,${userStore.userInfo.name},${getTimeState()}` }}</span>
      </div>
    </el-card>

    <!-- 快捷操作 -->
    <el-card class="quick_card_wrap">
      <template #header>
        <div class="quick_header_box">
          <div class="left_box">
            <span>快捷操作</span>
          </div>
          <div class="right_box"></div>
        </div>
      </template>
      <div class="quick_card_main_box">
        <el-card shadow="hover" class="quick_item_card" v-for="(qml, indexQML) in quickMenuList" :key="indexQML" @click="quickItemClick(qml)">
          <div class="quick_item_box">
            <i :class="`iconfont ${qml.meta.icon}`"></i>
            <span class="title_text">{{ qml.meta.title }}</span>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
  name: 'Home'
})
</script>
<script setup>
import { useUserStore, useRouterStore } from '@/store'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

// router
const router = useRouter()
// routerStore
const routerStore = useRouterStore()
// userStore
const userStore = useUserStore()

// 当前显示时间
const currentShowTime = ref('')

// 快捷项点击事件
const quickItemClick = qml => {
  console.log(qml)

  router.push({
    path: qml.path
  })
  // routerStore.currentMenuSort = qml.meta.sort
}

// 获取当前时间的函数
const getNowDateFormatFunc = () => {
  const now = dayjs()
  let nowDate = now.format('YYYY-MM-DD HH:mm:ss')
  // console.log(now.format('YYYY-MM-DD HH:mm:ss'));
  return nowDate
}

// 快捷菜单列表
const quickMenuList = ref([])

// 获取当前星期几的函数
const getCurrentWeek = () => {
  const dayOfWeek = dayjs().day()
  // console.log(dayOfWeek) // 0-6 分别代表周日到周六
  let weekStr = ''
  switch (dayOfWeek) {
    case 1:
      weekStr = '星期一'
      break

    case 2:
      weekStr = '星期二'
      break

    case 3:
      weekStr = '星期三'
      break

    case 4:
      weekStr = '星期四'
      break

    case 5:
      weekStr = '星期五'
      break

    case 6:
      weekStr = '星期六'
      break

    case 7:
      weekStr = '星期日'
      break

    default:
      break
  }
  return weekStr
}

// 获取时间段名称
function getTimeState() {
  // 获取当前时间
  let timeNow = new Date()
  // 获取当前小时
  let hours = timeNow.getHours()
  // 设置默认文字
  let state = ``
  // 判断当前时间段
  if (hours >= 0 && hours <= 10) {
    state = `早上好!`
  } else if (hours > 10 && hours <= 14) {
    state = `中午好!`
  } else if (hours > 14 && hours <= 18) {
    state = `下午好!`
  } else if (hours > 18 && hours <= 24) {
    state = `晚上好!`
  }
  return state
}

onMounted(() => {
  quickMenuList.value = router.options.routes
    .filter(item => {
      return item.name == 'Layout'
    })[0]
    .children.filter(item1 => {
      return item1.name != 'Home' && item1.name != 'AuthorityManagement'
    })

  console.log(quickMenuList.value)

  currentShowTime.value = getNowDateFormatFunc()

  setInterval(() => {
    currentShowTime.value = getNowDateFormatFunc()
  }, 1000)
})
</script>

<style lang="scss" scoped>
.home_wrap {
  width: 100%;
  height: 100%;
  animation-duration: 0.3s;

  .workbench_card_wrap {
    // min-height: 20%;
    margin-top: 8px;

    .workbench_header_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .left_box {
      }

      .right_box {
        .time {
          letter-spacing: 1.4px;
        }

        .week {
          margin-right: 16px;
        }
      }
    }

    .workbench_card_main_box {
      // border: 1px solid red;
      height: 50px;
      letter-spacing: 2px;
      font-size: 18px;
    }
  }

  .quick_card_wrap {
    width: 100%;
    margin-top: 20px;
    min-height: 20%;

    .quick_card_main_box {
      // border: 1px solid red;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .quick_item_card {
        cursor: pointer;
        width: calc(100% / 5);
        height: 130px;
        border-radius: 0px;

        .quick_item_box {
          position: relative;
          top: 32px;
          height: 100%;
          display: flex;
          flex-direction: column;
          // border: 1px solid red;
          text-align: center;

          .iconfont {
            margin-bottom: 10px;
            font-size: 30px;
          }

          .title_text {
            font-size: 18px;
            letter-spacing: 2px;
            position: relative;
            left: 2px;
          }
        }
      }
    }

    .el-card__body {
      padding: 0 !important;
    }
  }
}

:deep(.quick_card_wrap) {
  .el-card__body {
    padding: 0px;
  }
}
</style>
